<template>
  <div>
    <div class="table-content">
      <el-table
        class="tables"
        :size="contents.tableSize"
        :show-header="contents.tableShowHeader"
        :fit="contents.tableFit"
        :stripe="contents.tableStripe"
        :style="{
          width: '100%',
          fontSize: contents.tableContentFontSize,
          color: contents.tableContentFontColor,
        }"
        :data="dataList"
      >
        <el-table-column
          v-if="contents.tableSelection"
          type="selection"
          :header-align="contents.tableAlign"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          label="索引"
          :align="contents.tableAlign"
          v-if="contents.tableIndex"
          type="index"
          width="50"
        />
        <el-table-column
          :sortable="contents.tableSortable"
          :align="contents.tableAlign"
          prop="title"
          :header-align="contents.tableAlign"
          label="电桩编号"
        >
          <template slot-scope="scope">
            {{ scope.row.dianzhuangbianhao }}
          </template>
        </el-table-column>
        <el-table-column
          :sortable="contents.tableSortable"
          :align="contents.tableAlign"
          :header-align="contents.tableAlign"
          width="200"
          label="用户账户"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.yonghuzhanghao }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          :align="contents.tableAlign"
          :header-align="contents.tableAlign"
          label="用户姓名"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.yonghuxingming }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          :align="contents.tableAlign"
          :header-align="contents.tableAlign"
          label="开始时间"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.starttime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          :align="contents.tableAlign"
          :header-align="contents.tableAlign"
          label="充电时长"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        clsss="pages"
        :layout="layouts"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="Number(contents.pageEachNum)"
        :total="totalPage"
        :small="contents.pageStyle"
        class="pagination-content"
        :background="contents.pageBtnBG"
        :style="{
          textAlign:
            contents.pagePosition == 1
              ? 'left'
              : contents.pagePosition == 2
              ? 'center'
              : 'right',
        }"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      showFlag: true,
      sfshVisiable: false,
      shForm: {},
      chartVisiable: false,
      addOrUpdateFlag: false,
      contents: {
        searchBtnFontColor: "rgba(112, 111, 67, 1)",
        pagePosition: "2",
        inputFontSize: "14px",
        inputBorderRadius: "50px 50px 0 0",
        tableBtnDelFontColor: "#333",
        tableBtnIconPosition: "1",
        searchBtnHeight: "40px",
        tableBgColor: "rgba(225, 169, 119, 0)",
        inputIconColor: "rgba(255, 255, 255, 1)",
        searchBtnBorderRadius: "0 50px",
        tableStripe: false,
        btnAdAllWarnFontColor: "rgba(112, 111, 67, 1)",
        tableBtnDelBgColor: "#fff",
        searchBtnIcon: "0",
        tableSize: "medium",
        searchBtnBorderStyle: "dashed ",
        text: {
          padding: "10px 20px",
          boxShadow: "0 0 0px rgba(0,0,0,.1)",
          margin: "0 auto",
          borderColor: "rgba(0,0,0,.3)",
          backgroundColor: "rgba(255, 255, 255, 0.84)",
          color: "#333",
          borderRadius: "6px",
          borderWidth: "0",
          width: "80%",
          lineHeight: "700px",
          fontSize: "40px",
          borderStyle: "solid",
        },
        tableSelection: true,
        searchBtnBorderWidth: "3px",
        tableContentFontSize: "14px",
        searchBtnBgColor: "rgba(255, 255, 255, 1)",
        inputTitleSize: "14px",
        btnAdAllBorderColor: "rgba(112, 111, 67, 1)",
        pageJumper: false,
        btnAdAllIconPosition: "1",
        searchBoxPosition: "2",
        tableBtnDetailFontColor: "#333",
        tableBtnHeight: "40px",
        pagePager: true,
        searchBtnBorderColor: "rgba(112, 111, 67, 1)",
        tableHeaderFontColor: "rgba(255, 255, 255, 1)",
        inputTitle: "1",
        tableBtnBorderRadius: "40px 40px 0 0 ",
        btnAdAllFont: "1",
        btnAdAllDelFontColor: "rgba(112, 111, 67, 1)",
        tableBtnIcon: "1",
        btnAdAllHeight: "40px",
        btnAdAllWarnBgColor: "rgba(255, 255, 255, 1)",
        btnAdAllBorderWidth: "3px",
        tableStripeFontColor: "#606266",
        tableBtnBorderStyle: "dashed ",
        inputHeight: "40px",
        btnAdAllBorderRadius: " 0 0 50px 50px",
        btnAdAllDelBgColor: "rgba(255, 255, 255, 1)",
        pagePrevNext: true,
        btnAdAllAddBgColor: "rgba(255, 255, 255, 1)",
        searchBtnFont: "1",
        tableIndex: true,
        btnAdAllIcon: "1",
        tableSortable: false,
        pageSizes: true,
        tableFit: true,
        pageBtnBG: false,
        searchBtnFontSize: "14px",
        tableBtnEditBgColor: "#fff",
        box: {
          padding: "10px 20px",
          boxShadow: "0 0 6px rgba(0,0,0,0)",
          flag: "2",
          backgroundImage:
            "http://codegen.caihongy.cn/20211126/992a3f9af09a49af8230be8e8ee3cc60.png",
          background: "#fff",
        },
        inputBorderWidth: "4px",
        inputFontPosition: "2",
        inputFontColor: "rgba(112, 111, 67, 1)",
        pageEachNum: 10,
        tableHeaderBgColor: "rgba(112, 111, 67, 1)",
        inputTitleColor: "rgba(112, 111, 67, 1)",
        btnAdAllBoxPosition: "2",
        tableBtnDetailBgColor: "#fff",
        inputIcon: "0",
        searchBtnIconPosition: "1",
        btnAdAllFontSize: "14px",
        inputBorderStyle: "dashed ",
        tableHoverFontColor: "#333",
        inputBgColor: "rgba(255, 255, 255, 1)",
        pageStyle: false,
        pageTotal: false,
        btnAdAllAddFontColor: "rgba(112, 111, 67, 1)",
        tableBtnFont: "1",
        tableContentFontColor: "rgba(6, 6, 6, 1)",
        inputBorderColor: "rgba(112, 111, 67, 1)",
        tableShowHeader: true,
        tableHoverBgColor: "#f5f5f5",
        tableBtnFontSize: "14px",
        tableBtnBorderColor: "rgba(112, 111, 67, 1)",
        inputIconPosition: "2",
        tableBorder: true,
        btnAdAllBorderStyle: "dashed ",
        tableBtnBorderWidth: "4px",
        tableStripeBgColor: "#F5F7FA",
        tableBtnEditFontColor: "#333",
        tableAlign: "center",
      },
      layouts: "",
    };
  },
  methods: {
    getOrderList() {
      this.$http({
        url: "chongdianzhuangorder/page",
        method: "get",
        params: { page: this.pageIndex, limit: this.pageSize, sort: "id" },
      }).then(({ data }) => {
        let { data: tableData } = data;
        this.dataList = tableData.list;

        this.totalPage = data.total.total;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getOrderList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getOrderList();
    },
  },
  created() {
    this.getOrderList();
  },
};
</script>

<style lang="scss" scoped>
.slt {
  margin: 0 !important;
  display: flex;
}

.ad {
  margin: 0 !important;
  display: flex;
}

.pages {
  & /deep/ el-pagination__sizes {
    & /deep/ el-input__inner {
      height: 22px;
      line-height: 22px;
    }
  }
}

.el-button + .el-button {
  margin: 0;
}

.tables {
  & /deep/ .el-button--success {
    height: 40px;
    color: #333;
    font-size: 14px;
    border-width: 4px;
    border-style: dashed;
    border-color: rgba(112, 111, 67, 1);
    border-radius: 40px 40px 0 0;
    background-color: #fff;
  }

  & /deep/ .el-button--primary {
    height: 40px;
    color: #333;
    font-size: 14px;
    border-width: 4px;
    border-style: dashed;
    border-color: rgba(112, 111, 67, 1);
    border-radius: 40px 40px 0 0;
    background-color: #fff;
  }

  & /deep/ .el-button--danger {
    height: 40px;
    color: #333;
    font-size: 14px;
    border-width: 4px;
    border-style: dashed;
    border-color: rgba(112, 111, 67, 1);
    border-radius: 40px 40px 0 0;
    background-color: #fff;
  }

  & /deep/ .el-button {
    margin: 4px;
  }
}
.form-content {
  background: transparent;
}
.table-content {
  background: transparent;
}

.tables /deep/ .el-table__body tr {
  background-color: rgba(225, 169, 119, 0) !important;
  color: rgba(6, 6, 6, 1) !important;
}
.tables /deep/ .el-table__body tr.el-table__row--striped td {
  background: transparent;
}
.tables /deep/ .el-table__body tr.el-table__row--striped {
  background-color: #f5f7fa !important;
  color: #606266 !important;
}

.tables /deep/ .el-table__body tr:hover > td {
  background-color: #f5f5f5 !important;
  color: #333 !important;
}
</style>
